<script setup lang="ts">
import { computed, inject, ref } from 'vue'
import { useActiveOp } from '@renderer/views/imgViewer/hooks/useActiveOp'
import axios from 'axios'

const { ioInstance, sendMsg, baseUri, throughGatewayFlag } = inject('pyImgHandlerIo') as any

const phaseInfo = inject('phaseInfo') as any

const isMultiSeries = computed(() => {
  return phaseInfo.value?.total > 0;
})

const commonButtons = ref([
  {
    label: 'window', //界面显示的信息
    value: 'window', //发送给后端的属性
    icon: '' // 图标
  },
  {
    label: 'pan',
    value: 'pan',
    icon: 'markRaw(HandMove)'
  },
  {
    label: 'scroll',
    value: 'scroll',
    icon: 'markRaw(ChevronUpDown16Filled)'
  },
  {
    label: 'zoom',
    value: 'zoom',
    icon: 'markRaw(ZoomIn)'
  },
  {
    label: 'cross',
    value: 'cross',
    icon: 'markRaw(ChevronUpDown16Filled)'
  }
])
const measureOpButtons = ref([
  {
    label: 'line',
    value: 'line',
    icon: 'markRaw(Ruler)'
  },
  {
    label: 'angle',
    value: 'angle',
    icon: 'markRaw(Angle)'
  },
  {
    label: 'ellipse',
    value: 'ellipse',
    icon: 'markRaw(EllipseOutline)'
  },
  {
    label: 'rectangle',
    value: 'rectangle',
    icon: 'markRaw(RectangleLandscape12Regular)'
  }
])
const resetButtons = ref([
  {
    label: 'measure',
    value: 'resetMeasure'
  },
  {
    label: 'window',
    value: 'resetWindow'
  },
  {
    label: 'zoom',
    value: 'resetZoom',
    disabled: true
  },
  {
    label: 'all',
    value: 'resetAll'
  }
])

const emits = defineEmits(['rotate', 'reset'])
const { activeOp, setActiveOp } = useActiveOp()

const handleReset = (subType) => {
  setActiveOp({
    type: 'reset',
    subType: subType
  })
  emits('reset', subType)
}

const playStateRef = ref(false)
const handlePlay4d = async () => {
  playStateRef.value = !playStateRef.value
  const prefix = throughGatewayFlag ? `${baseUri}/image/` : `${baseUri}/`
  const msg = {
    playSpeed: 0.1,
    viewType: 'mpr'
  }
  await axios.post(`${prefix}play4d`, msg)
}
const handlePause = async () => {
  playStateRef.value = !playStateRef.value
  const prefix = throughGatewayFlag ? `${baseUri}/image/` : `${baseUri}/`

  await axios.post(`${prefix}pause`)
}
</script>

<template>
  <el-scrollbar height="400px" class="pb-[20px]">
    <div class="mb-[10px]">
      <template v-for="item in commonButtons">
        <el-button
          class="w-full"
          @click="
            setActiveOp({
              type: item.value,
              subType: item.value
            })
          "
          :type="activeOp.type === item.value ? 'primary' : ''"
          >{{ item.value }}
        </el-button>
      </template>
    </div>

    <div class="mb-[10px]">
      <template v-for="btn in measureOpButtons">
        <el-button
          class="w-full !ml-0"
          @click="
            setActiveOp({
              type: 'measure',
              subType: btn.value
            })
          "
          :type="activeOp.subType === btn.label ? 'primary' : ''"
        >
          {{ btn.value }}
        </el-button>
      </template>
    </div>

    <div v-if="isMultiSeries">
      <el-button v-if="!playStateRef" class="w-full !ml-0" @click="handlePlay4d">play 4D</el-button>
      <el-button v-else class="w-full !ml-0" @click="handlePause">pause</el-button>
    </div>

    <div>
      <span>Reset</span>
      <template v-for="btn in resetButtons">
        <el-button class="w-full reset-btn" :disabled="btn.disabled" @click="handleReset(btn.value)"
          >{{ btn.label }}
        </el-button>
      </template>
    </div>
  </el-scrollbar>
</template>

<style scoped>
.btnContainer {
  @apply w-full flex flex-col pl-[5px] pt-[10px] flex-1 overscroll-contain;
  height: calc(100% - 100px);
  width: 100%;
}

.btnWrapper {
  width: calc(100% - 10px);
}

.el-button {
  margin-left: 0px !important;
}
</style>
